<template>
	<view>
		<u-sticky offset-top="0">
			<u-tabs :list="tabList" :is-scroll="false" font-size="28" height="88" bar-width="56" :bar-style="tabActive"
			 active-color="#171919" inactive-color="#666666" :current="current" @change="change"></u-tabs>
		</u-sticky>
		<view class="subject">
			<view class="mt20" v-for="item in couponList" :key="item.id">
				<coupon :showUseBtn="showUseBtn" :discount="item"></coupon>
			</view>
		</view>
	</view>
</template>

<script>
	import couponItem from "../../json/coupon.js"
	import coupon from "../../components/orderitems/coupon.vue"
	export default {
		components: {
			coupon
		},
		data() {
			return {
				current: 0,
				tabList: [],
				tabActive: {
					background: "#FCB900"
				},
				showUseBtn: true,
				couponList: []
			}
		},
		methods: {
			change(index) {
				this.current = index;
				switch(index){
					case 0:
						this.couponList = couponItem.canUseList;
						break;
					case 1:
						this.couponList = couponItem.notUseList;
						break;
					case 2:
						this.couponList = couponItem.overTime;
						break;
					default: break;
				}
			},
			setTabList() {
				this.tabList[0] = {
					name: "可用（" + couponItem.canUseList.length + "）"
				};
				this.tabList[1] = {
					name: "已使用（" + couponItem.notUseList.length + "）"
				};
				this.tabList[2] = {
					name: "已失效（" + couponItem.overTime.length + "）"
				};
			}
		},
		created() {
			this.setTabList();
			this.couponList = couponItem.canUseList;
		}
	}
</script>

<style scoped>
	.subject {
		padding: 0 20rpx;
	}
</style>
